<template>
  <Card>
    <div>
      <Button type="primary" @click="create">新增手册</Button>
        <Input
            v-model="doc1"
            @on-change="change"
            suffix="ios-search"
            style="width: 200px; margin-left: 10px"
            placeholder="请输入标题"
          />
            <Input
            v-model="doc2"
            @on-change="change2"
            suffix="ios-search"
            style="width: 200px; margin-left: 10px"
            placeholder="请输入类型"
          />
    </div>

    <Table
      class="table"
      :loading="loading1"
      highlight-row
      :columns="columns"
      :data="data"
    ></Table>

    <Page
      class="page"
      show-total
      :total="total"
      :current.sync="current"
      show-elevator
      @on-change="changePage"
    />
    <el-dialog
      title="内容"
      :visible.sync="show1"
      width="30%"
      append-to-body
      center
    >
      <div v-html="content"></div>
    </el-dialog>

    <!-- Form -->

     <el-dialog
      title="修改手册"
      append-to-body
      :visible.sync="show2"
      :before-close="quxiao"
    >
      <el-form :model="newData">
          <el-form-item label="标题:" :inline="true">
          <el-input v-model="newData.title"></el-input>
        </el-form-item>
        <el-form-item label="类型:" :inline="true">
          <el-input v-model="newData.type"></el-input>
        </el-form-item>
        <el-form-item label="权重:" :inline="true">
          <el-input v-model="newData.weight" type="number"></el-input>
        </el-form-item>
        <el-form-item label="具体内容:"></el-form-item>
        <vue-tinymce
          :key="show2 ? 1 : 2"
          :value="newData.content"
          @catchData="catchData"
          style="height:400px"
        ></vue-tinymce> 
        <!-- <vue-tinymce
          v-if="show2"
          :value="newData.content"
          @catchData="catchData"
        ></vue-tinymce> -->
      
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="upsure">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      center
      width="30%"
      title="温馨提示"
      append-to-body
      :visible.sync="show3"
    >
      <p>是否删除?</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show3 = false">取 消</el-button>
        <el-button type="primary" @click="delsure">确 定</el-button>
      </div>
    </el-dialog>
  </Card>
</template>

<script>
import tinymce from "../components/tinymce.vue";
export default {
  components: { tinymce },
  data() {
    return {
      current: 1,
      size: 10,
      columns: [
        { title: "标题", key: "title", align: "center" },
        { title: "类型", key: "type", align: "center" },
        // { title: "单位地址", key: "phone", align: "center" },
        { title: "权重", key: "weight", align: "center" },
        {
          title: "内容",
          key: "content",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "p",
                {
                  attrs: {
                    title: params.row.content,
                    domPropsInnerHTML: params.row.content,
                  },
                  domProps: { innerHTML: params.row.content },
                  style: {
                    overflow: "hidden",
                    "text-overflow": "ellipsis",
                    display: "-webkit-box",
                    "-webkit-box-orient": "vertical",
                    "-webkit-line-clamp": "7",
                    cursor: "pointer",
                  },
                  on: {
                    click: () => {
                      this.more(params.row);
                    },
                  },
                },
                params.row.content
              ),
            ]);
          },
          //   render: (h, params) => {
          //     return h(
          //       "span",
          //       {
          //         style: {},
          //       },

          //       params.row.content
          //     );
          //   },
        },
        {
          title: "操作",
          align: "center",
          width: 500,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.updateHelpDoc(params.row);
                    },
                  },
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.deleteHelpDoc(params.row);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      data: [],
      loading1: false,
      total: 0,
      show1: false,
      show2: false,
      show3: false,
      show4:false,
      content: "",

      newData: {
        content: "",
        title: "",
        type: "",
        weight: "",
        id: "",
      },
      doc1:"",
      doc2:""
    };
  },
  created() {
     this.getHelpDoc();
  },
  mounted() {
    this.getHelpDoc();
  },
  methods: {
    change(){
         this.current = 1
         this.title= this.doc1
        
         this.type =this.doc2
         console.log(this.doc1)
         console.log(this.doc2)
      this.getHelpDoc()
    },
      change2(){
         this.current = 1
        
         this.title=  this.doc1
         this.type =this.doc2
         console.log(this.doc1)
         console.log(this.doc2)
      this.getHelpDoc()
    },
    create() {
      this.newData = {};
      this.show2 = true;
      
    },
    // 输入文本
    catchData(data) {
      this.newData.content = data;
    },
    getHelpDoc() {
      this.loading1 = true;
      this.$http(
        "/stage/doc/getHelpDoc",
        {
          current: this.current,
          size: this.size,
          title: this.title,
          type: this.type,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            console.log(res.data.data);
            this.data = res.data.data.records;
            this.total = res.data.data.total;
            console.log(this.total);
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading1 = false;
        }
      );
    },
    changePage(e) {
      this.current = e;
      this.getHelpDoc();
    },
    updateHelpDoc(params) {
      this.show2 = true;
      console.log(params.content);
      this.$nextTick(() => {
        this.newData = {
          id: params.id,
          weight: params.weight,
          type: params.type,
          weight: params.weight,
          title: params.title,
          content: params.content,
        };
        })
    },
    deleteHelpDoc(params) {
      console.log(params);
      this.deparams = params;
      this.show3 = true;
    },
    delsure() {
      this.$http(
        "/stage/doc/deleteHelpDoc",
        {
          id: this.deparams.id,
        },
        "get",
        (res) => {
          if (res.data.code == 200) {
            this.show3 = false;
            this.getHelpDoc();
            this.$Message.success("删除成功");
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    more(params) {
      console.log(params);
      (this.show1 = true), (this.content = params.content);
    },
    upsure() {
    
      if (this.newData.content == undefined || this.newData.content == "") {
        this.$message({
          message: "具体内容不能为空",
          type: "warning",
        });

        return;
      }
      if (this.newData.weight == undefined || this.newData.weight == "") {
        this.$message({
          message: "权重不能为空",
          type: "warning",
        });

        return;
      }
      if (this.newData.type == undefined || this.newData.type == "") {
        this.$message({
          message: "类型不能为空",
          type: "warning",
        });

        return;
      }
      if (this.newData.title == undefined || this.newData.title == "") {
        this.$message({
          message: "类型不能为空",
          type: "warning",
        });

        return;
      }
      if(this.newData.id){
         this.$http(
        "/stage/doc/updateHelpDoc",
        {
          content: this.newData.content,
          id: this.newData.id,
          title: this.newData.title,
          type: this.newData.type,
          weight: this.newData.weight,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
               this.quxiao()
          
            this.getHelpDoc();
            
            this.$Message.success("修改成功");
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    
      }else{
     this.$http(
        "/stage/doc/saveHelpDoc",
        {
          content: this.newData.content,
          id: this.newData.id,
          title: this.newData.title,
          type: this.newData.type,
          weight: this.newData.weight,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.quxiao()
            // this.created()
             this.getHelpDoc();
            this.$Message.success("保存成功");
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
      
      }
      
      //   console.log()
    },
    save() {
    
     
      //   console.log()
    },











    quxiao() {
      // this.getHelpDoc()
      this.newData = {};
      this.show2 = false;
    },
      quxiao2() {
     
      // this.getHelpDoc()
      this.newData = {};
      this.show4 = false;
    },
  },
};
</script>

<style scoped>
.el-input{
  width: 80%!important;
}
</style>